<script setup lang="ts">
import dayjs from 'dayjs'
import { ReportApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useForm, useTable } from '@/hooks'
import { formatMoney } from '@/utils/common'

// defineOptions({ name: 'LessonStatReport' })

const visible = ref(false)

const className = ref('')
// const title = ref('课消详情')
const title = computed(() => `${className.value}课消详情`)

const { form, resetForm } = useForm<any>({
  dateFrom: undefined,
  dateTo: undefined,
  classId: undefined,
})

const {
  tableData,
  loading,
  search,
} = useTable(() => ReportApi.getLessonStatList(form), { immediate: false })

const columns: TableInstanceColumns[] = [
  { title: '序号', dataIndex: 'index', width: 66, align: 'center', fixed: 'left', render: ({ rowIndex }) => rowIndex + 1, summaryCellStyle: () => {
    return { backgroundColor: 'rgb(var(--arcoblue-6))', color: '#fff' }
  } },
  { title: '学生', dataIndex: 'studentName', width: 100 },
  { title: '总课消', dataIndex: 'totalLessonPrice', slotName: 'totalLessonPrice', align: 'right', width: 120 },
  { title: '已课消', dataIndex: 'consumedLessonPrice', slotName: 'consumedLessonPrice', align: 'right', width: 120 },
  { title: '未课消', dataIndex: 'remainedLessonPrice', slotName: 'remainedLessonPrice', align: 'right', width: 120 },
]

// const summary = computed(() => {
//   const countData = {
//     totalLessonPrice: 0,
//     consumedLessonPrice: 0,
//     remainedLessonPrice: 0,
//   }
//   tableData.value.forEach((record) => {
//     countData.totalLessonPrice += record.totalLessonPrice
//     countData.consumedLessonPrice += record.consumedLessonPrice
//     countData.remainedLessonPrice += record.remainedLessonPrice
//   })

//   return {
//     totalLessonPrice: formatMoney(countData.totalLessonPrice),
//     consumedLessonPrice: formatMoney(countData.consumedLessonPrice),
//     remainedLessonPrice: formatMoney(countData.remainedLessonPrice),
//   }
// })

const tableSummary = ({ columns, data }) => {
  const countData = {
    totalLessonPrice: 0,
    consumedLessonPrice: 0,
    remainedLessonPrice: 0,
  }
  data.forEach((record) => {
    countData.totalLessonPrice += record.totalLessonPrice
    countData.consumedLessonPrice += record.consumedLessonPrice
    countData.remainedLessonPrice += record.remainedLessonPrice
  })

  return [{
    index: '合计',
    totalLessonPrice: formatMoney(countData.totalLessonPrice),
    consumedLessonPrice: formatMoney(countData.consumedLessonPrice),
    remainedLessonPrice: formatMoney(countData.remainedLessonPrice),
  }]
}
const refresh = () => {
  resetForm()
  search()
}

// watch(form, () => search())

const open = (query: any) => {
  // console.log({ query })
  // Object.assign(form, query)
  form.dateFrom = query.dateFrom
  form.dateTo = query.dateTo
  form.id = query.classId
  className.value = query.className
  search()
  visible.value = true
}

defineExpose({
  open,
})
</script>

<template>
  <ProFormPanel
    v-model:visible="visible"
    mode="modal"
    :title="title"
    :loading="loading"
    :footer="false"
    :max-width="1040"
  >
    <!-- <template #title-right>
      <div class="ml-100px flex">
        <StatisticsItem tip="总课消" icon="count" unit="" count-color="#ff7d00" :count="summary.totalLessonPrice" />
        <StatisticsItem tip="已课消" icon="count" unit="" count-color="#ff7d00" :count="summary.consumedLessonPrice" />
        <StatisticsItem tip="未课消" icon="count" unit="" count-color="#ff7d00" :count="summary.remainedLessonPrice" />
      </div>
    </template> -->
    <ProTable
      :data="tableData"
      :columns="columns"
      :loading="loading"
      :pagination="false"
      :summary="tableSummary"
      @refresh="refresh"
    >
      <template #classId="{ record }">
        <CellClassInfo :id="record.id" :name="record.className" />
      </template>
      <template #totalLessonPrice="{ record }">
        {{ formatMoney(record.totalLessonPrice) }}
      </template>
      <template #consumedLessonPrice="{ record }">
        {{ formatMoney(record.consumedLessonPrice) }}
      </template>
      <template #remainedLessonPrice="{ record }">
        {{ formatMoney(record.remainedLessonPrice) }}
      </template>
      <template #summary-cell="{ column, record, rowIndex }">
        <div>
          {{ record[column.dataIndex] }}
        </div>
      </template>
    </ProTable>
  </ProFormPanel>
</template>

<style lang="less" scoped>
.label {
  display: inline-block;
  width: 60px;
  text-align: right;
  flex-shrink: 0;
  margin-right: 10px;
  color: var(--color-text-1);
}
</style>
